<template>
  <div class="newHumans">
    <ProTable
      ref="ProTableRef"
      :requestApi="getTableList"
      :initParam="initParam"
      :pagination="false"
      :columns="columns"
    >
      <template #tableHeader="scope">
        <div class="'btn'">
          <el-button
            type="primary"
            :icon="CirclePlus"
            @click="openDialog('新增')"
          >
            新增
          </el-button>
          <el-button
            type="danger"
            plain
            :icon="Delete"
            v-if="scope.isSelected"
            @click="batchDelete(scope.selectedListIds)"
          >
            批量删除
          </el-button>
        </div>
      </template>
      <el-table-column prop="section" label="性别" align="center">
        <template #default="scope">
          <div v-for="item in scope.row.section" :key="item._id" class="text">
            <span>{{ `${item.gender == "1" ? "男" : "女"}` }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="section" label="年龄范围" align="center">
        <template #default="scope">
          <div v-for="item in scope.row.section" :key="item._id" class="text">
            <span>{{ `${item.start_age}岁~${item.end_age}岁` }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="section" label="稳态最小值" align="center">
        <template #default="scope">
          <div v-for="item in scope.row.section" :key="item._id" class="text">
            <span>{{ `${item.min_value}` }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="section" label="平衡位置数据值" align="center">
        <template #default="scope">
          <div v-for="item in scope.row.section" :key="item._id" class="text">
            <span>{{ `${item.balance_value}` }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="section" label="稳态最大值" align="center">
        <template #default="scope">
          <div v-for="item in scope.row.section" :key="item._id" class="text">
            <span>{{ `${item.max_value}` }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="220" align="center">
        <template #default="scope">
          <el-button
            type="primary"
            link
            :icon="View"
            @click="openDialog('查看', scope)"
          >
            查看
          </el-button>
          <el-button
            type="primary"
            link
            :icon="EditPen"
            @click="openDialog('编辑', scope)"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            link
            :icon="Delete"
            @click="deleteAccount(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </ProTable>

    <!-- 弹窗 -->
    <newHumansDialog ref="dialogRef" />
  </div>
</template>

<script setup lang="tsx" name="MemberManage">
import { useHandleData } from "@/hooks/useHandleData";
import newHumansDialog from "@/views/constManage/x/newHumans/newHumansDialog/newHumansDialog.vue";
import {
  getMedicineListApi,
  addMedicineApi,
  deleteMedicineApi,
} from "@/api/modules";
import { CirclePlus, View, EditPen, Delete } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { reactive, ref } from "vue";

const ProTableRef = ref();
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
  name: "测试",
  family: "X",
  item_code: "",
  item_value: "",
  system: "",
  type: "新人类",
});

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  return getMedicineListApi(params);
};

// 表格配置项
const columns = [
  { type: "selection", fixed: "left", width: 70 },
  { type: "index", label: "序号", width: 70 },
  {
    prop: "name",
    label: "人体常数名称",
  },
  { prop: "system", label: "系统" },
];

// 打开 drawer(新增、查看、编辑)
const dialogRef = ref();
const openDialog = (title: string, scope?: any) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...scope?.row },
    api:
      title === "新增"
        ? addMedicineApi
        : title === "编辑"
        ? addMedicineApi
        : undefined,
    getTableList: ProTableRef.value?.getTableList,
  };
  dialogRef.value?.acceptParams(params);
};

// 删除用户信息
const deleteAccount = async (params: any) => {
  console.log(params);
  await useHandleData(
    deleteMedicineApi,
    params._id,
    `删除【${params.name}】常数`
  );
  ProTableRef.value?.getTableList();
};

// 批量删除用户信息
const batchDelete = async (id: string[]) => {
  console.log(id);
  // await useHandleData(deleteUser, { id }, "删除所选用户信息");
  // ProTable.value?.clearSelection();
  // ProTable.value?.getTableList();
};
</script>

<style scoped lang="scss">
@import "./newHumans.scss";
</style>
